<template>
  <div class="comments" ref="comments">
    <div class="block" v-if="hotComments !== undefined && hotComments.length !== 0">
      <p class="title">
        精彩评论 <span class="count">({{ hotComments.length }})</span>
      </p>

      <div class="comment" v-for="(item, index) in hotComments" :key="index">
        <div class="avatar">
          <img v-lazy="$utils.genImgUrl(item.user.avatarUrl, 80)" />
        </div>
        <div :class="{ border: index !== hotComments.length - 1 }" class="content">
          <p class="comment-text">
            <span class="username">{{ item.user.nickname }}:</span>
            <span class="text">{{ item.content }}</span>
          </p>
          <div class="replied" v-if="item.beReplied.length">
            <p class="comment-text">
              <span class="username">{{ item.beReplied[0].user.nickname }}:</span>
              <span class="text">{{ item.beReplied[0].content }}</span>
            </p>
          </div>
          <div class="bottom">
            <span class="date">{{ $utils.formatDate(item.time) }}</span>
            <div class="actions">
              <Icon :size="12" type="good" />
              {{ item.likedCount }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最新评论 -->
    <div class="block" v-if="comments !== undefined && comments.length !== 0">
      <p class="title">
        最新评论 <span class="count">({{ total }})</span>
      </p>

      <div class="comment" v-for="(item, index) in comments" :key="index">
        <div class="avatar">
          <img v-lazy="$utils.genImgUrl(item.user.avatarUrl, 80)" />
        </div>

        <div :class="{ border: index !== comments.length - 1 }" class="content">
          <p class="comment-text">
            <span class="username">{{ item.user.nickname }}:</span>
            <span class="text">{{ item.content }}</span>
          </p>
          <div class="replied" v-if="item.beReplied.length">
            <p class="comment-text">
              <span class="username">{{ item.beReplied[0].user.nickname }}:</span>
              <span class="text">{{ item.beReplied[0].content }}</span>
            </p>
          </div>
          <div class="bottom">
            <span class="date">{{ $utils.formatDate(item.time) }}</span>
            <div class="actions">
              <Icon :size="12" type="good" />
              {{ item.likedCount }}
            </div>
          </div>
        </div>
      </div>

      <!-- 分页器 -->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageNum"
        :page-size="pageSize"
        class="pagination"
      >
      </el-pagination>
    </div>
    <empty v-else>还没有评论哦~</empty>
  </div>
</template>

<script type="text/ecmascript-6">
import { getSongComment, getPlaylistComments, getMvComment } from 'network/request'

const SONG_TYPE = 'song'
const PLAYLIST_TYPE = 'playlist'
const MV_TYPE = 'mv'

export default {
  name: 'Comment',
  props: {
    id: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: SONG_TYPE
    }
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 页码
      pageNum: 1,
      pageSize: 20,
      hotComments: [],
      comments: []
    }
  },
  created() {
    this._getComments()
  },
  methods: {
    // 页码改变事件
    handleCurrentChange(val) {
      // 保存页码
      this.pageNum = val
      // 重新获取数据
      this._getComments()
      this.$nextTick(() => {
        this.$refs.comments.scrollIntoView({ behavior: 'smooth' })
      })
    },
    // 获取歌单评论
    async _getComments() {
      let parentUpdate = false
      let params = {
        rid: this.id,
        limit: this.pageSize,
        offset: (this.pageNum - 1) * this.pageSize
      }
      let resp = '';
      if (this.type == PLAYLIST_TYPE) {
        parentUpdate = true
        resp = await getPlaylistComments(this.id, params)
      } else if (this.type == MV_TYPE) {
        resp = await getMvComment(this.id, params)
      }else{
        resp = await getSongComment(this.id, params)
      }

      this.comments = resp.comments
      this.hotComments = resp.hotComments
      this.total = resp.total
      if (parentUpdate) {
        this.$emit('update', this.total)
      }
    }
  },
  watch: {
    id: {
      handler(newId) {
        if (newId) {
          this.pageNum = 1
          this._getComments()
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  margin-bottom: 48px;

  .title {
    font-size: $font-size-lg;
    font-weight: $font-weight-bold;
    margin-bottom: 4px;

    .count {
      font-size: $font-size;
    }
  }

  .comment {
    display: flex;
    padding-top: 20px;

    .avatar {
      @include img-wrap(40px);
      margin-right: 12px;

      img {
        border-radius: 50%;
      }
    }

    .content {
      padding-bottom: 20px;
      width: 100%;
      font-size: $font-size-sm;

      &.border {
        border-bottom: 1px solid var(--border);
      }

      .replied {
        padding: 8px;
        margin-top: 8px;
        background: var(--song-shallow-grey-bg);
        border-radius: 4px;
      }

      .comment-text {
        .username {
          display: inline-block;
          margin-right: 4px;
          color: $blue;
        }

        .text {
          line-height: 1.5;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;

        .date {
          color: var(--font-color-grey-shallow);
        }

        .actions {
          color: var(--font-color-grey-shallow);
        }
      }
    }
  }

  .pagination {
    text-align: right;
  }
}
</style>
